<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    防抖：
    <input type="text" id="input1" />
    <br />
    节流：
    <input type="text" id="input2" />
    <br />
    <script>
      // 防抖：在事件触发n秒在执行回调，如果在这n秒内有执行了，则重新执行该函数
      // 节流：在规定时间内执行一次函数
      const input1 = document.getElementById('input1')
      const input2 = document.getElementById('input2')

      // input1.onchange=function(e){
      //   return function(){

      //   }
      // }
      input1.oninput = debounce(fn, 1000)
      input2.oninput = debounce(fn, 1000)

      // 防抖
      function debounce(fn, time) {
        return function() {
          // 下次还点击时，清除定时器
          clearInterval(this.timer)
          // 过了指定的时间在执行fn函数
          this.timer = setTimeout(args => {
            fn.call(this, args)
          }, time)
        }
      }
      // 节流
      function throttle(fn,interval) {
        // 设置一个看门时间
        let lastTime 
        return function(arg) {
          // 记录现在的时间
          let startTime=new Date()
          // 其当前点击时间小于间隔,进入计时，并且修改当前时间为旧的
          let time=startTime-lastTime
          if(time<interval){
            this.timer=setTimeout(()=>{
              clearInterval(this.timer)
                fn.call(this,arg)
            },interval)

          }else{
            // 超过间隔则直接执行
            fn.call(this,arg)
          }
          // 修改时间
          lastTime=startTime
        }
      }
      //
      function fn() {
        console.log('debounce')
      }
    </script>
  </body>
</html>
